<template>
  <div>
    <a-card>
      <a-row :gutter="20">
        <a-col :span="6">
          <!--搜索框-->
          <a-input-search placeholder="请输入目录名查找" enter-button/>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" @click="addCateVisiable = true">新增</a-button>
        </a-col>
      </a-row>

      <!--这个地方绑定的都要是空列表，并且要绑定主键-->
      <a-table rowKey="name" :columns="columns" :dataSource="catelist" bordered>
        <template slot="action" slot-scope="data">
          <div class="actionSlot">
            <a-button type="primary" icon="edit" style="margin-right: 20px" @click="editCate(data.ID)">编辑</a-button>
            <a-button type="danger" icon="delete" @click="deleteCate(data.ID)">删除</a-button>
          </div>
        </template>
      </a-table>
    </a-card>

    <!--新增目录-->
    <a-modal closable :visible="addCateVisiable" width="60%" title="新增目录" @ok="addCateOk" @cancel="addCateCancel"
             destroyOnClose>
      <a-form-model :model="cateInfo" :rules="cateRules" ref="addCateRef">
        <a-form-model-item label="目录名" prop="name">
          <a-input v-model="cateInfo.name"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!--编辑目录-->
    <a-modal closable :visible="editCateVisiable" width="60%" title="更新目录" @ok="editCateOk" @cancel="editCateCancel"
             destroyOnClose>
      <a-form-model :model="cateInfo" :rules="cateRules" ref="editCateRef">
        <a-form-model-item label="目录名" prop="name">
          <a-input v-model="cateInfo.name"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: 'ID',
    dataIndex: 'ID',
    width: '5%',
    key: 'id',
    align: 'center'
  },
  {
    title: '目录名',
    dataIndex: 'name',
    width: '10%',
    key: 'name',
    align: 'center'
  },
  {
    title: '操作',
    width: '20%',
    key: 'action',
    scopedSlots: {customRender: 'action'},
    align: 'center'
  },
]
export default {
  name: "ArtList",
  data() {
    return {
      queryParam: {
        pagesize: 5,
        pagenum: 1,
      },
      columns,
      catelist: [],
      cateInfo: {
        id: 0,
        name: '',
      },
      visible: false,
      addCateVisiable: false,
      editCateVisiable: false,
      cateRules: {
        name: [
          {required: true, message: '请输入目录名', trigger: 'blur'},
          {min: 1, max: 50, message: '目录名应在1到50个字符之间', trigger: 'blur'},
        ]
      },

    }
  },
  created() {
    this.GetCateList()
  },
  methods: {
    async GetCateList() {
      const {data: res} = await this.$http.get('category', {
        params: {
          pagesize: this.queryParam.pagesize,
          pagenum: this.queryParam.pagenum
        }
      })
      if (res.status != 200) return this.$message.error(res.message)
      this.catelist = res.data
      console.log(this.catelist)
    },
    addCateOk() {
      this.$refs.addCateRef.validate(async (valid) => {
        if (!valid) return this.$message.error('参数不符合要求，请重新输入')
        const {data: res} = await this.$http.post('category/add', {
          name: this.cateInfo.name,
        })
        if (res.status != 200) return this.$message.error(res.message)
        this.addCateVisiable = false
        this.$message.success('添加目录成功')
        this.GetCateList()
      })
    },
    addCateCancel() {
      this.$refs.addCateRef.resetFields()
      this.addCateVisiable = false
    },
    //编辑目录
    async editCate(id) {
      this.editCateVisiable = true
      const {data: res} = await this.$http.get(`category/${id}`)
      console.log(res.data)
      this.cateInfo = res.data
      this.cateInfo.id = id
    },
    editCateOk() {
      this.$refs.editCateRef.validate(async (valid) => {
        if (!valid) return this.$message.error('参数不符合要求，请重新输入')
        await this.$http.put(`category/${this.cateInfo.id}`, {
          name: this.cateInfo.name,
        })
        if (res.status != 200) return this.$message.error(res.message)
        this.editCateVisiable = false
        this.$message.success('编辑成功')
        this.GetCateList()
      })
    },
    editCateCancel() {
      this.$refs.editCateRef.resetFields()
      this.editCateVisiable = false
    },
    //删除目录
    deleteCate(id) {
      this.$confirm({
        title: '提示：请确认操作？',
        content: '一旦删除，无法恢复',
        onOk: async () => {
          const {data: res} = await this.$http.delete(`category/${id}`)
          if (res.status != 200) return this.$message.error(res.message)
          this.$message.success('删除成功')
          this.GetCateList()
        },
        onCancel: () => {
          this.$message.info('已取消删除')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>